<template>
	<view class="backup" :style="{'padding-top':statusHeight + 'px'}">
		<view class="top">
			<image mode="widthFix" src="../../static/3.jpg"></image>
		</view>

		<view class="centerLabel">
			<h2>备份提示</h2>
			<label class="labelClass">获得助记词等于拥有钱包资产所有权</label>
			<view class="line"></view>
			<view class="labelItem">
				<view class="dot"></view>
				<view class="label">助记词由英文组成，请抄写并妥善保存</view>
			</view>
			<view class="labelItem">
				<view class="dot"></view>
				<view class="label">助记词丢失，无法找回，请无比备份助记词</view>
			</view>

			<view class="backupBtn" @click="openPop">立即备份</view>
			<view class="lateBtn" @click="toTable">稍后备份</view>
		</view>


		<uni-popup ref="popup" type="bottom" background-color="#fff" @change="popChange">

			<view class="popup">
			
					<image class="image" src="../../static/close1.png" mode="widthFix" @click="closePop"></image>
				
				
				<view class="center">
					<image src="../../static/img21.png" mode="heightFix"></image>
					<h3>请勿截屏</h3>
					<label class="label1">请勿截屏分享和存储，这将可能被第三方</label>
					<label class="label2">软件恶意收集，造成资产损失</label>
				</view>
				
				<view class="konwBtn" @click="toZhuji">知道了</view>
			</view>
		</uni-popup>

		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				userInfo:{},
				wordList: ['fort', 'command', 'stream', 'umvunga', 'attack', 'trooper', 'asking', 'drift', 'position',
					'remaiend', 'talking', 'crushed'
				],
			}
		},
		methods: {
			openPop() {
				//打开弹出款
				this.$refs.popup.open()
			},
			toTable() {
				//去主页
				console.log("点击了")
				this.Api.tab_to('/pages/wallet/wallet')
			},
			popChange() {},
			closePop(){
				this.$refs.popup.close()
			},
		async	toZhuji(){
				var that =this
				let userInfo = await this.getUserInfo();
				userInfo.mnemonic =  this.wordList.toString()
				uni.setStorage({
					key:'userInfo',
					data:userInfo,
					success() {
						that.Api.go_to('/pages/backZhuji/backZhuji')
					}
				})
				
			},
			getUserInfo(){
				let userInfo={}
				uni.getStorage({
					key:"userInfo",
					success(res) {
						 console.log(res)
						userInfo= res.data
					}
				})
				return userInfo
			}
			
		},
		onLoad() {
		
			
		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight+20 || 10; //如果没有获取到高度，那么指定10px；
			}
		}
	}
</script>

<style scoped>
	.top {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top image {
		width: 162rpx;
	}

	.centerLabel {
		display: flex;
		flex-direction: column;
		padding: 40rpx;

	}

	.labelClass {
		margin-top: 40rpx;
		color: #4E4F65;
		font-size: 35rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #F2F3F7;
		margin-top: 60rpx;
	}

	.dot {
		background-color: #4E4F65;
		width: 6rpx;
		height: 6rpx;
		border-radius: 6rpx;
	}

	.labelItem {
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.labelItem .label {
		margin-left: 20rpx;
		font-size: 32rpx;
		color: #4E4F65;
	}

	.backupBtn {
		width: 90%;
		background-color: #1277DF;
		height: 100rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		line-height: 100rpx;
		text-align: center;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.lateBtn {
		width: 100%;
		text-align: center;
		color: #0068DB;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.popup{
		width: 100%;
		height: 40vh;
		background-color: #F5F6F8;
		display: flex;
		flex-direction: column;
		padding:0 10rpx;
		box-sizing: border-box;
	}
	
	 .image{
		width: 32rpx;
		margin: 20rpx 0rpx;
		margin-left: 20rpx;
	}
	.center{
		width: 100%;
		background-color: white;
		height: calc(100% - 200rpx);
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 80rpx;
		flex-direction: column;
	}
	.center image{
		width: 137rpx;
		margin-top: 20rpx;
	}
	.center h3{
		margin-top: 20rpx;
	}
	.center .label1{
		margin-top: 30rpx;
		color: #686B74;
	}
	.center .label2{
		
		color: #686B74;
	}
	.konwBtn{
		width: 100%;
		background-color: #1277DF;
		height: 80rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>
